<%--
  Created by IntelliJ IDEA.
  User: ykj
  Date: 16/3/24
  Time: 下午11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<style>
    .cal-form{
        width: 500px;
        margin:0 auto;
        padding: 20px;
    }
    .cal-group{
        overflow: hidden;
        height: 50px;
        margin-left: 50px;
    }
    .cal-input{
        width: 200px;
        float: left;
        margin-left: 10px;
        height: 34px;
        font-size: 16px;
        line-height: 34px;
    }
    .cal-label{
        width: 100px;
        float: left;
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #a5a5a5;
        text-align: right;
    }
    .cal-input .cal-unit{
        width: 40px;
    }
    .color-green{
        color: #9aca40;
    }
    .state-error{
        border: 1px solid #d9534f;
        background: #f1dcdb;
        color: #121212;
    }
</style>
<script>
    $(document).ready(function(){
        $('#calBtn').click(function(){
            checkAndCal();
        });
    });
    function checkAndCal(){
        var regx;
        var rs;

        var invest = $('#invest');
        regx=/^\d+$/;
        rs=regx.exec(invest.val());
        if(!rs){
            invest.focus();
            invest.addClass('state-error');
            return;
        }
        invest.removeClass('state-error');

        var rate = $('#rate');
        regx=/^\d+(\.\d{1,2})?$/;
        rs=regx.exec(rate.val());
        if(!rs){
            rate.focus();
            rate.addClass('state-error');
            return;
        }
        rate.removeClass('state-error');

        var days = $('#days');
        regx=/^\d+$/;
        rs=regx.exec(days.val());
        if(!rs){
            days.focus();
            days.addClass('state-error');
            return;
        }
        days.removeClass('state-error');
        $('.input-group input').removeClass('state-error');

        var earning = calEarning(invest.val(), rate.val(), days.val());
        $('#earning').text(earning);
    }
    function calEarning(invest, rate, days){
        var earning = rate/100/365*invest*days;
        earning = earning.toFixed(2);
        return earning;
    }
</script>
<!-- Modal -->
<div class="modal fade" id="calModal" tabindex="-1" role="dialog" aria-labelledby="calModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="calModalLabel">收益计算器</h4>
            </div>
            <div class="modal-body">
                <div class="cal-form">
                    <div class="cal-group">
                        <div class="cal-label">投资金额:</div>
                        <div class="input-group cal-input">
                            <input type="text" id="invest" class="form-control"/>
                            <span class="input-group-addon cal-unit">元</span>
                        </div>
                    </div>
                    <div class="cal-group">
                        <div class="cal-label">利率:</div>
                        <div class="input-group cal-input">
                            <input type="text" id="rate" class="form-control"/>
                            <span class="input-group-addon cal-unit">%</span>
                        </div>
                    </div>
                    <div class="cal-group">
                        <div class="cal-label">投资期限:</div>
                        <div class="input-group cal-input">
                            <input type="text" id="days" class="form-control"/>
                            <span class="input-group-addon cal-unit">天</span>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="cal-group">
                        <div class="cal-label">预估收益:</div>
                        <div class="cal-input" style="color: #a5a5a5;"><span id="earning" class="color-green">--</span><span style="font-size: 12px">元</span></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger" id="calBtn">计算收益</button>
            </div>
        </div>
    </div>
</div>
